import { useEffect,useState } from 'react';
import { connect } from 'dva';
import { Table, Tag, Space } from 'antd';

const { Column, ColumnGroup } = Table;






function EmployeeList({ employee, dispatch }) {

  const [data,setData] = useState(employee)
  
  // componentDidMount
  useEffect(() => {
    console.log("aa",employee)
    dispatch({
      type: 'employee/getAll',
    }).then((res)=>{
      
      setData(res)
    })
  }, []);

  useEffect(() => {
   
   setData(employee)
  }, [employee]);
 
  
  return (
    <div>
      
      <Table dataSource={data}>
    <ColumnGroup title="Name">
      <Column title="First Name" dataIndex="firstName" key="firstName" />
      <Column title="Last Name" dataIndex="lastName" key="lastName" />
    </ColumnGroup>
    <Column title="Age" dataIndex="age" key="age" />
    <Column title="Address" dataIndex="address" key="address" />
   
    <Column
      title="Action"
      key="action"
      render={(text, record) => (
        
        <Space size="middle">
         
          <a>Invite {record.lastName}</a>
          <a onClick={() =>{
             dispatch({
              type: 'employee/deleteEmployee',
              payload: {
                id:text.key,
              },
            })
          }
           
               
              }>Delete</a>
        </Space>
      )}
    />
  </Table>,

      {/* <h1>Employee List Page</h1>
      <ul>
        {employee.map((e) => (
          <li key={e.id}>
            {e.name}{' '}
            <button
              onClick={() =>
                dispatch({
                  type: 'employee/deleteEmployee',
                  payload: {
                    id: e.id,
                  },
                })
              }
            >
              删除
            </button>
          </li>
        ))}
      </ul> */}
    </div>
  );
}

export default connect(({ employee }) => ({ employee }))(EmployeeList);
